<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
	<!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>FBConnectBrowser</title>
	
	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />		
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />		
	-->
	<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
	<script type="text/javascript" charset="utf-8" src="FBConnect.js"></script>
	<script type="text/javascript" charset="utf-8" src="json2-min.js"></script>
	<style>
	
* {
	-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
	/*-webkit-text-size-adjust: none; *//* prevent webkit from resizing text to fit */
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
	
	margin:0;
	padding:0;
} 
		
	body
	{
		background-color:#3B5998;
		color:#FFF;
		font-family: Helvetica, Verdana;
		margin-bottom:20px;
	}
	
	#loading
	{
		z-index:1;
		width:100%;
		top:200px;
		position:absolute;
		text-align:center;
	}
	
	#gbWrap
	{
		overflow:hidden;
		position:absolute;
		top:60px;
		bottom:0px;
	}
	
	.view
	{
		width:320px;
		float:left;
		clear:none;
		
	}
	
	
	#fbFriends li
	{
		list-style:none;

		height:56px;
		background:-webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgba(0,0,0,0.1)),
			color-stop(1, rgba(128,128,128,0.1))
		)
	}
	
	#fbFriends li:active
	{
		background-color:rgba(255,255,255,0.5);	
	}
	
	#fbFriends li img
	{
		margin:2px 12px;
		min-height:48px;
		min-width:48px;s
	}
	
	#fbFriends li span
	{
		position:relative;
		top:-12px;
	}
	
	#details
	{
		position:absolute;
		left:320px;
		height:100%;
	}

		
	</style>
	
    <script type="text/javascript" charset="utf-8">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	var client_id = "91320880376";
	var redir_url = "http://www.facebook.com/connect/login_success.html";
	var friendsMap = {};
	
	function onBodyLoad()
	{
		document.addEventListener("deviceready",onDeviceReady,false);		
	}

	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	function onDeviceReady()
	{
		// do your thing!
		var fb = FBConnect.install();
		fb.connect(client_id,redir_url,"touch");
		fb.onConnect = onFBConnected;
	}
	
	function onFBConnected()
	{
		document.getElementById("loading").innerHTML = "Connected! Getting your friends ...";
		var req = window.plugins.fbConnect.getFriends();
		req.onload = onGotFriends;
	}
	
	function onGotFriends(evt)
	{
		document.getElementById("loading").style.visibility = "hidden";
		 
		var json = JSON.parse(evt.target.responseText);
		
		
		var listItems = [];
		var template = "<li id='FBID' onclick='showUser(\"FBID\")'><img src='https://graph.facebook.com/FBID/picture'/><span>NAME</span></li>";
		for(var n = 0, len = json.data.length; n < len; n++)
		{
			var friend = json.data[n];
			friendsMap[friend.id] = friend;
			listItems.push(template.replace(/FBID/g,friend.id).replace(/NAME/g,friend.name));
		}
		document.getElementById("fbFriends").innerHTML = listItems.join("");
	}
	
	function showUser(id)
	{
		// TODO: Do something with user id ...
		alert(friendsMap[id].name);
	}
	
	
    
    </script>
  </head>
  <body onload="onBodyLoad()">
	<h3 id="loading">Loading ...</h3>

	<ul id="fbFriends">
		<!-- Placeholder for later -->
	</ul>


  </body>
</html>
